<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>



    <h1>兼容 ie </h1>

    <h2>Accordion with symbols</h2>



    
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .active,
        .accordion:hover {
            background-color: #ccc;
        }

        .accordion:after {
            content: '\002B';
            color: #777;
            font-weight: bold;
            float: right;
            margin-left: 5px;
        }

        .active:after {
            content: "\2212";
        }

        .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
    <button class="accordion">Section 1</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat.</p>
    </div>


    <button class="accordion">Section 3</button>
    <div class="panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enimore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi uolor sit ex ea commodo consequat.</p>
    </div>


    <button class="accordion">Section 5</button>
    <div class="panel">
        <p>Lorem   rem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, beataolor sit amet consectetur adipisicing elit. Voluptatum, beataolor sit amet consectetur adipisicing elit. Voluptatum, beatae. Praesentium iste quis
            laboriosam. magnam incidunt quisquam facisunt.
            equat.</p>
    </div>



    <h1> 必知必会 </h1>

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">

        设置动画:
        transition: max-height 0.2s ease-out;


        设置 +/- 号:
        .active:after {
        content: "\2212";
        }


        window.onload = function () {
            var acc = document.querySelectorAll(".accordion");
            var i;
            // 循环绑定点击事件: 
            for (let i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function () {
                    //  toggle 函数, 切换 active 取反
                    this.classList.toggle('active')

                    //  下个元素,  获取内容区的高度
                    let panel = this.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                })
            }
        }

  


        <styleeeee>
            .accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }
    
            .active,
            .accordion:hover {
                background-color: #ccc;
            }
    
            .accordion:after {
                content: '\002B';
                color: #777;
                font-weight: bold;
                float: right;
                margin-left: 5px;
            }
    
            .active:after {
                content: "\2212";
            }
    
            .panel {
                padding: 0 18px;
                background-color: white;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }
        </styleeeee>
        <button class="accordion">Section 1</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat.</p>
        </div>
    
    
        <button class="accordion">Section 3</button>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enimore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitation ullamco laboris nisi uolor sit ex ea commodo consequat.</p>
        </div>
    
    
        <button class="accordion">Section 5</button>
        <div class="panel">
            <p>Lorem   rem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, beataolor sit amet consectetur adipisicing elit. Voluptatum, beataolor sit amet consectetur adipisicing elit. Voluptatum, beatae. Praesentium iste quis
                laboriosam. magnam incidunt quisquam facisunt.
                equat.</p>
        </div>

        

    </xmp>


    <script>
        
        window.onload = function () {
            var acc = document.querySelectorAll(".accordion");
            var i;
            // 循环绑定点击事件: 
            for (let i = 0; i < acc.length; i++) {
                acc[i].addEventListener("click", function () {
                    //  toggle 函数, 切换 active 取反
                    this.classList.toggle('active')

                    //  下个元素,  获取内容区的高度
                    let panel = this.nextElementSibling;
                    console.log("现在的容器的高度是:     " + panel.style.maxHeight);

                    // 如果内容区的高度为真,  不为空, 说明这个内容区被撑开:
                    if (panel.style.maxHeight) {
                        console.log("现在的容器的高度是:     " + panel.style.maxHeight);   // 如果容器有高度值, 那么就把它变成 null
                        panel.style.maxHeight = null;
                        console.log("  maxHeight = null,  现在的容器的高度是:     " + panel.style.maxHeight);
                    } else {
                        console.log("现在的容器的高度是 nulllll   ");
                        panel.style.maxHeight = panel.scrollHeight + "px";      // 如果容器没有高度值, 那么就把它变成 容器的高度
                        console.log("   panel.scrollHeight + ,  现在的容器的高度是:     " + panel.style.maxHeight);
                    }
                })
            }
        }




        /*
                alert(123)
                   
                    let arr = document.querySelectorAll(".panel");
                    for (let i = 0; i < arr.length; i++) {
                        arr[i].style.maxHeight = null;
                    }

      for (i = 0; i < acc.length; i++) {
             acc[i].addEventListener("click", function () {
                 this.classList.toggle("active");
                 var panel = this.nextElementSibling;
                 if (panel.style.maxHeight) {
                     panel.style.maxHeight = null;
                 } else {
                     panel.style.maxHeight = panel.scrollHeight + "px";
                 }
             });
         }
        */




    </script>
</body>

</html>